<style type="text/css">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	


	.close {
		position: absolute;
		right: 8px;
		top: 0px;
		font-size: 22px;
		user-select: none;
		font-style: normal;
		cursor: pointer;
		color: #fff;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.close:hover {
		opacity: .1;
		transform: scale(1.2);
	}



	.close-ani{
			-webkit-animation-name: aniclose;
			        animation-name: aniclose;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
	}
	@-webkit-keyframes aniclose{
		0% {bottom: 0;left: 0}
		100%{bottom: -60vh;left: -100vw}
	}
	@keyframes aniclose{
		0% {bottom: 0;left: 0}
		100%{bottom: -60vh;left: -100vw}
	}
	.closetotop-ani{
			-webkit-animation-name: aniclosetop;
			        animation-name: aniclosetop;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
	}
	@keyframes aniclosetop{
		0% {bottom: 0;}
		100%{bottom: -60vh;}
	}
	.closetoleft-ani{
			-webkit-animation-name: anicloseleft;
			        animation-name: anicloseleft;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
	}
	@keyframes anicloseleft{
		0% {left: 0;bottom: 0}
		100%{left: -100vw;bottom: 0}
	}
	.closetoright-ani{
			-webkit-animation-name: anicloseright;
			        animation-name: anicloseright;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
	}
	@keyframes anicloseright{
		0% {left: 0;bottom: 0}
		100%{left: 100vw;bottom: 0}
	}
	.closetobottom-ani{
			-webkit-animation-name: aniclosebottom;
			        animation-name: aniclosebottom;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
	}
	@keyframes aniclosebottom{
		0% {left: 0;bottom: 0vh}
		100%{left: 0;bottom: 100vh}
	}
	.popuptotop-ani{
		-webkit-animation-name: anipopuptop;
		        animation-name: anipopuptop;
		-webkit-animation-duration: 1s;
		        animation-duration: 1s;
		-webkit-animation-timing-function:ease-in-out;
		        animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		        animation-fill-mode:forwards;
	}
	@-webkit-keyframes anipopuptop{
		0% {bottom: -60vh}
		50% {bottom: -4vh}
		65% {bottom: -4.5vh}
		75% {bottom: -1vh}
		100%{bottom: 0}
	}
	@keyframes anipopuptop{
		0% {bottom: -60vh;left:0;}
		50% {bottom: -4vh;left:0;}
		65% {bottom: -4.5vh;left:0;}
		75% {bottom: -1vh;left:0;}
		100%{bottom: 0;left:0;}
	}
	.popuptoleft-ani{
		-webkit-animation-name: anipopupleft;
		        animation-name: anipopupleft;
		-webkit-animation-duration: 1s;
		        animation-duration: 1s;
		-webkit-animation-timing-function:ease-in-out;
		        animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		        animation-fill-mode:forwards;
	}
	@keyframes anipopupleft{
		0% {left: -100vw;bottom: 0}
		50% {left: -4vw;bottom: 0}
		65% {left: -4.5vw;bottom: 0}
		75% {left: -1vw;bottom: 0}
		100%{left: 0;bottom: 0}
	}
	.popuptoright-ani{
		-webkit-animation-name: anipopupright;
		        animation-name: anipopupright;
		-webkit-animation-duration: 1s;
		        animation-duration: 1s;
		-webkit-animation-timing-function:ease-in-out;
		        animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		        animation-fill-mode:forwards;
	}
	@keyframes anipopupright{
		0% {left: 100vw;bottom: 0;}
		50% {left: 4vw;bottom: 0;}
		65% {left: 4.5vw;bottom: 0;}
		75% {left: 1vw;bottom: 0;}
		100%{left: 0;bottom: 0;}
	}
	.popuptobottom-ani{
		-webkit-animation-name: anipopupbottom;
		        animation-name: anipopupbottom;
		-webkit-animation-duration: 1s;
		        animation-duration: 1s;
		-webkit-animation-timing-function:ease-in-out;
		        animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		        animation-fill-mode:forwards;
	}
	@keyframes anipopupbottom{
		0% {bottom: 100vh;left:0;}
		50% {bottom: -4vh;left:0;}
		65% {bottom: -4.5vh;left:0;}
		75% {bottom: -1vh;left:0;}
		100%{bottom: 0;left:0;}
	}
</style>


<!-- ugc / 非全屏弹出框 start-->
<div class="popup_location" data-closeani='close-ani'
	style="position: fixed;bottom: -100vh;height: 100vh;width: 20vw;background-color: #000;opacity: 0.9;color: #fff;">
	<i class="close">&#10005;</i>
	<div id="position" style="width: 100%;height: 100%;margin-bottom: 10px;"></div>
</div>

<script type="text/javascript" id="modelscript">
	
	$('#position').load("insert_position.html");


	//阻止弹出框的点击事件冒泡
	$('.popup_location').click(function (event) {
		event.stopPropagation();
	});
	//点击除了弹出框以及触发弹出框弹出的按钮，使弹出框的返回
	$(document).click(function (event) {
		var popup = $('.popup_location'),
			btn=$('.popupbtn_location'),
			popup_closeani = btn.data('closeani'),
			popup_openani=btn.data('openani'),
			target = $(event.target);
		if (target.hasClass('popupbtn_location') || $(target).hasClass('popup')) {
			return false;
		}
		//如果当前弹出框是出现状态，则点击后触发弹框返回
		if (popup.hasClass(popup_openani)) {
			popup.removeClass(popup_openani).addClass(popup_closeani);
		}
	});
	//open按钮事件
	$('.popupbtn_location').on('click', function (event) {
		
		var popup = $('.popup_location'),
			btn = $(this),
			popup_closeani = btn.data('closeani'),
			btnani = btn.data('btnani'),
			popup_openani=btn.data('openani');
		popup.removeClass(popup_openani).removeClass(popup_closeani);
		btn.removeClass(btnani);
		setTimeout(function () {
			popup.addClass(popup_openani);
			btn.addClass(btnani);
		});
	});


	//弹出框的关闭按钮事件
	$('.close').on('click', function (event) {
		//阻止冒泡
		event.stopPropagation();
		var popup = $('.popup_location'),
			btn=$('.popupbtn_location'),
			popup_closeani = btn.data('closeani'),
			popup_openani=btn.data('openani');
		popup.removeClass(popup_openani).addClass(popup_closeani);

	});
</script>
<!-- ugc / 非全屏弹出框 end-->